<template>
  <div class="pencil-wrapper" ref="pencilContainer">
    <!-- <iframe src="http://www.baidu.com" frameborder="0" width="800" height="798"></iframe> -->
    <ul class="pencil-tool">
      <li :class="[drawing ? 'active' : '']"
        @click.stop="startDraw"
      >draw</li>
      <li :class="[colorful ? 'active' : '']"
        @click.stop="setColor"
      >color</li>
      <select v-model="lineWidth" class="lineOption">
        <option
          v-for="(item, index) in lineWidthArr" :key="index"
          :value="item"
        >{{item}}</option>
      </select>
    </ul>
    <canvas
      v-show="drawing"
      id="draw-box"
    ></canvas>
  </div>
</template>

<script>
export default {
  name: 'Pencil',
  data () {
    return {
      canvas: null, // 画板
      context: null, // 画板上下文
      drawing: false, // 是否开始绘制
      colorful: false,
      curPoint: { x: 0, y: 0 }, // 当前坐标点
      oldPoint: { x: 0, y: 0 }, // 上一个坐标点
      lineWidth: 2, // 线宽
      lineWidthArr: [2, 4, 6, 8, 10] // 线宽集合
    }
  },
  mounted () {
    this.setCanvasSize();
    this.bindCanvasEvent();
  },
  updated () {
    console.log(this.lineWidth)
  },
  methods: {
    setCanvasSize () {
      const _wrapperSize = this.$refs.pencilContainer.getBoundingClientRect();
      this.canvas = document.getElementById('draw-box');
      this.context = this.canvas.getContext('2d');
      this.context.globalAlpha = 0;
      this.canvas.width = _wrapperSize.width;
      this.canvas.height = _wrapperSize.height;
      this.canvas.style.left = _wrapperSize.left + 'px';
      this.canvas.style.top = _wrapperSize.top + 'px';
    },
    bindCanvasEvent () {
      this.canvas.addEventListener('mousedown', (evt) => {
        if (!this.drawing) return;
        this.curPoint.x = evt.offsetX;
        this.curPoint.y = evt.offsetY;
        this.oldPoint.x = this.curPoint.x - 1;
        this.oldPoint.y = this.curPoint.y - 1;
        this.canvas.addEventListener('mousemove', this.move);
        this.canvas.addEventListener('mouseup', this.up);
      })
    },
    startDraw (evt) {
      this.drawing = !this.drawing;
    },
    draw (x, y) {
      this.context.beginPath();
      this.context.lineWidth = this.lineWidth;
      this.context.lineCap = 'round';
      this.context.moveTo(x, y);
      this.context.lineTo(this.oldPoint.x, this.oldPoint.y);
      this.context.stroke();
      this.context.closePath();
    },
    move (evt) {
      const x = evt.offsetX;
      const y = evt.offsetY;
      this.draw(x, y);
      this.oldPoint.x = x;
      this.oldPoint.y = y;
    },
    up (evt) {
      this.canvas.removeEventListener('mousemove', this.move);
    },
    setColor () {
      this.colorful = !this.colorful;
    }
  }
}
</script>

<style lang="less" scoped>
.pencil-wrapper{
  width: 100%;
  height: 100%;
  .pencil-tool{
    list-style: none;
    float: right;
    margin-top: -35px;
    li{
      display: inline-block;
      width: 65px;
      font-size: 18px;
      line-height: 18px;
      padding: 5px;
      font-weight: bold;
      cursor: pointer;
      border: 1px solid rgba(51, 51, 51, 0.2);
      margin-right: 5px;
      border-radius: 5px;
      &.active{
        color: #ffffff;
        background-color: rgba(66, 185, 131);
      }
    }
    .lineOption{
      width: 65px;
      height: 30px;
      outline: none;
      color: #ffffff;
      font-size: 18px;
      line-height: 18px;
      font-weight: bold;
      border-radius: 5px;
      background-color: rgba(66, 185, 131);
      border: 1px solid rgba(51, 51, 51, 0.2);
    }
  }
  #draw-box{
    position: absolute;
    pointer-events: auto;
  }
}
</style>
